<template>
    <!-- 导航栏 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item :to="{ path: '/upload' }">
            <h3>文件上传</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>



    <el-row :gutter="20">

        <el-col :span="10" :offset="2">
            <div>
                <input type="file" @change="handleFileChange" />
            </div>

        </el-col>

    </el-row>

    <el-row :gutter="20">

        <!-- <el-col :span="3" :offset="2">

            <el-select v-model="value" placeholder="Select" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-col> -->
        <el-col :span="10" :offset="2">
            <button @click="uploadFile">上传文件</button>
        </el-col>
    </el-row>

    <el-divider />

    <el-row>
        <el-col class="textcolor" :span="20" >条件覆盖转化成测试用例>>>请选择要转化的文件，然后进行上传，再进行下载</el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="10" :offset="2">
            <div> <input type="file" @change="handleFileChange2" /></div>
        </el-col>

    </el-row>
    <el-row :gutter="20">

        <el-col :span="10" :offset="2">

            <button @click="uploadFile2">
                2-上传条件覆盖组合
            </button>

        </el-col>
        <el-col :span="3">

            <button @click="download_converfile">
                3-下载转化后的文件
            </button>

        </el-col>
    </el-row>
    <el-divider />




</template>


<script lang="ts" setup>
import { ref } from 'vue'
import { ArrowRight, Message } from '@element-plus/icons-vue'    //图标显示引用
import { ElMessage, ElMessageBox } from 'element-plus'
import { uploadfile, conversionfile, downloadcoverfile } from '../../api/workers'

// 选择上传的文件
const selectedFile = ref(null);
const selectedFile2 = ref(null);
const formData = new FormData();


const handleFileChange = (event) => {
    selectedFile.value = event.target.files[0];
    console.log(selectedFile.value);

}

const handleFileChange2 = (event) => {
    selectedFile2.value = event.target.files[0];
    console.log(selectedFile2.value);

}


// 上传文件
const uploadFile = async () => {
    if (!selectedFile.value) {
        alert('请选择一个要上传的文件。');
        return;
    }
    const formData = new FormData();
    formData.append('file', selectedFile.value);

    // 上传文件 
    uploadfile(formData).then(res => {
        console.log(selectedFile.value);
        console.log(res.data);
        console.log(res.data.msg);

        ElMessage({
            message: res.data.msg,
            type: 'success',
        })


    }).catch(res => {
        console.log('uploadfile  catch');
        ElMessage({
            message: res.data.msg,
            type: 'success',
        })

    })

}


// 上传conversionfile 
const uploadFile2 = async () => {
    if (!selectedFile2.value) {
        alert('请选择一个要上传的文件。');
        return;
    }
    const formData = new FormData();

    formData.append('file', selectedFile2.value);

    // 上传文件 
    conversionfile(formData).then(res => {
        console.log(selectedFile.value);
        console.log(res.data);
        console.log(res.data.msg);

        ElMessage({
            message: res.data.msg,
            type: 'success',
        })


    }).catch(res => {
        console.log('conversionfile  catch');
        ElMessage({
            message: res.data.msg,
            type: 'success',
        })

    })

}

// 下载文件
const download_converfile = () => {
    console.log('dowload download_converfile !');
    let params = {
        filename: "coverfile.xlsx"
    }
    downloadcoverfile(params).then(
        (res) => {
            // 打开下载的文件 总是提示文件内容损坏，不能打开 , 关闭掉 main。js中的mock相关的文件导入就可以了解决了
            let blob = new Blob([res.data], { "type": 'application/vnd.ms-excel;charset=utf-8' });

            const a = document.createElement('a');
            const url = URL.createObjectURL(blob);
            a.href = url;
            a.setAttribute('download', 'coverfile.xlsx'); // 设置下载文件名
            document.body.appendChild(a);      //将a标签添加到body当中
            a.click();
            document.body.removeChild(a);
            //释放内存
            window.URL.revokeObjectURL(url);

            ElMessage({
                message: "浏览器下载中，请稍等...",
                type: 'info',
            })
        }
    ).catch((e) => {
        ElMessage({
            message: "网络异常！",
            type: 'warning',
        })

    })

}




</script>


<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}

.textcolor{
    color: red;
}
.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>